<template>
  <div>
    <el-card class="box-card" :body-style="{ padding: '0px' }">
      <div class="el-card__header">
        <div slot="header" class="clearfix">
          <span>员工信息</span>
        </div>
      </div>
      <div class="text item">
        <template>
          <el-table stripe :data="tableData" style="width: 100%">
            <el-table-column prop="index" label="序号" width="50" />
            <el-table-column prop="userId" label="员工编号" />
            <el-table-column prop="name" label="员工姓名" />
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="agency.name" label="所属机构" />
            <el-table-column prop="account" label="系统账户" />
            <el-table-column prop="stationName" label="系统角色" />
            <el-table-column prop="status" label="账户状态" />
          </el-table>
        </template>
        <!-- 放置分页组件 -->
        <el-row
          type="flex"
          style="height: 60px"
          align="middle"
          justify="end"
          class="el-row"
        >
          <!-- 放置分页组件 -->
          <el-pagination
            :current-page="page"
            background
            :total="total"
            :page-size="pageSize"
            layout="total,prev, pager,sizes, next,jumper"
            :page-sizes="[3, 4, 5, 6]"
            @current-change="currentChange"
            @size-change="handleSizeChange"
          />
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { staffPagingData } from '@/api/dashboard'
export default {
  props: {
    orgMessage: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      page: 1,
      pageSize: 5,
      total: 0
    }
  },
  created() {
    this.staffPagingData()
  },
  methods: {
    async staffPagingData() {
      const res = await staffPagingData({
        page: this.page,
        pageSize: this.pageSize,
        agencyId: this.orgMessage.id
      })
      // console.log(res)
      this.tableData = res.data.items
      // console.log(this.tableData)
      this.tableData.forEach((item, index) => {
        item.index = index + 1
      })
      this.total = +res.data.counts
    },
    // 用户修改一页显示几条数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.page = 1
      this.staffPagingData()
    },
    currentChange(page) {
      // console.log(page)
      this.page = page
      this.staffPagingData()
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  .el-card__header {
    background-color: #fafafa;
    .clearfix {
      span {
        color: #2a2929;
        font-weight: 700;
        font-size: 16px;
      }
    }
  }
  .item {
    padding: 20px;
    height: 562px;
    position: relative;
    // overflow-y: auto;
    .el-row {
      width: 100%;
      position: absolute;
      bottom: 0;
      justify-content: center;
      background-color: #fff;
    }
  }
}
</style>
